<template>
    <div class="tableList">
        <el-table :data="tableData" border style="width: 100%;" @sort-change="handleSortChange"
            :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}"
            :cell-style="{color:'#5a5a5a',fontSize:'12px',fontWeight:400}" v-loading="loading" element-loading-text="加载中"
            element-loading-background="rgba(250, 250, 250, 0.5)" element-loading-spinner="el-icon-loading" ref="tabList"
            :key="toUpdateTableKey">
            <el-table-column v-for="(item,index) in tableGroup" :key="index" :label="item.name"
                :sortable="item.sortable" :min-width="item.width" show-overflow-tooltip>
                <template slot-scope="scope">
                    <code v-if="item.label != 'depUsers'">
                        {{scope.row[item.label]}}
                    </code>
                    <code v-if="item.label == 'depUsers'" class="tag">
                        <span v-for="(t,index) in scope.row[item.label]" :key="index">
                            {{t}}
                        </span>
                    </code>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="edit(scope.row)">编辑
                    </el-button>
                    <el-popconfirm
                        placement='top'
                        confirm-button-text='删除'
                        title="确认删除部门？删除后不可恢复"
                        @confirm='confirmDel(scope.row.id)'
                        >
                         <el-button slot="reference" type="text" size="small" style="margin-left:10px">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
            <div slot="empty">
                <el-empty :image-size='100'></el-empty>
            </div>
        </el-table>
        <el-pagination v-if="tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :page-sizes="[10,20,50,100]" :page-size="searchForm.limit"
            layout="total, prev, pager, next, sizes" :total="total" background>
        </el-pagination>
    </div>
</template>

<script>
    import {
        depList
    } from '@/api/userController'
    export default {
        data() {
            return {
                loading: false,
                tableData: [],
                total: 0,
                toUpdateTableKey:false
            }
        },
        props: {
            tableGroup: {
                type: Array,
                default: () => []
            },
            searchForm: {
                type: Object,
                default: () => ({})
            }
        },
        methods: {
            //部门列表
            getDepList(data,tipName) {
                this.loading = true
                depList(data,tipName).then(res => {
                    if (res.code == 200) {
                        this.tableData = res.data.records
                        this.total = res.data.total
                        this.tableData.map((item, i) => {
                            item.index = (res.data.current - 1) * 10 + (i + 1)
                        })
                        tipName && this.utils.showMsg(`${tipName}成功`, 'success')
                    }
                    this.loading = false
                })
            },
            handleSortChange({
                order,
                prop
            }) {},

            //编辑
            edit(row) {
                this.$emit('openDialog', '编辑',row)
            },
            //确认删除
            confirmDel(id){
                this.$emit('delDep',id)
                let totalPage = Math.ceil((this.total - 1) / this.searchForm.limit)
                let currentPage = this.searchForm.page > totalPage ? totalPage : this.searchForm.page
                this.searchForm.page = currentPage < 1 ? 1 : currentPage
            },
            //pageSize 改变时会触发
            handleSizeChange(val) {
                this.searchForm.limit = val
                this.getDepList(this.searchForm)
            },
            //currentPage 改变时会触发
            handleCurrentChange(val) {
                this.searchForm.page = val
                this.getDepList(this.searchForm)
            },
            updateTable() {
                this.toUpdateTableKey = !this.toUpdateTableKey
            }
        },
        beforeUpdate() {
            this.$nextTick(() => {
                this.$refs.tabList.doLayout()
            })
        }
    }
</script>

<style lang="less" scoped>
    .tableList {
        padding: 0 20px;

        code{
            font-family: sans-serif;
        }

        .tag {
            display: flex;
            flex-wrap: wrap;
            width: 100%;

            span {
                display: inline-block;
                background-color: rgb(245, 245, 245);
                padding: 0 7px;
                border-radius: 3px;
                margin-right: 4px;
                margin-bottom: 5px;
                height: 100%;
            }

            span:last-child {
                margin-bottom: 0;
            }
        }
    }
</style>